<template>
	<div>
		<div class="city-index-r-1 clear-float">
			<div>
				<h3>总人口数</h3>
				<p>781096</p>
			</div>
			<div>
				<h3>外来人口</h3>
				<p>
					<span>20532</span>
				</p>
			</div>
			<div>
				<h3>外籍人口</h3>
				<p>
					<span>1398</span>
				</p>
			</div>
		</div>
		<div class="city-index-r-2 clear-float">
			<h2>房屋及重点单位</h2>
			<div>
				<h4>楼栋</h4>
				<p>178550<span>间</span> </p>
			</div>
			<div>
				<h4>井盖</h4>
				<p>165923<span>处</span> </p>
			</div>
			<div>
				<h4>小区</h4>
				<p>2356<span>个</span> </p>
			</div>
			<div>
				<h4>群租楼</h4>
				<p>2356<span>栋</span> </p>
			</div>
			<div>
				<h4>加油站</h4>
				<p>25<span>家</span> </p>
			</div>
			<div>
				<h4>房屋</h4>
				<p>987745<span>间</span> </p>
			</div>
			<div>
				<h4>路灯</h4>
				<p>6221<span>处</span> </p>
			</div>
			<div>
				<h4>加气站</h4>
				<p>26<span>家</span> </p>
			</div>
			<div>
				<h4>医院</h4>
				<p>9<span>家</span> </p>
			</div>
			<div>
				<h4>卫生服务站</h4>
				<p>123<span>处</span> </p>
			</div>
		</div>
		<div class="city-index-r-3 clear-float">
			<h2>关注及帮扶对象</h2>
			<div>
				<h4>上访户</h4>
				<p>26<span>户</span> </p>
			</div>
			<div>
				<h4>康复人员</h4>
				<p>1302<span>人</span> </p>
			</div>
			<div>
				<h4>失能对象</h4>
				<p>256<span>人</span> </p>
			</div>
			<div>
				<h4>半失能对象</h4>
				<p>223<span>人</span> </p>
			</div>
			<div>
				<h4>孤寡老人</h4>
				<p>201<span>人</span> </p>
			</div>
			<div>
				<h4>刑释人员</h4>
				<p>132<span>人</span> </p>
			</div>
			<div>
				<h4>残疾人</h4>
				<p>1621<span>人</span> </p>
			</div>
			<div>
				<h4>低保户</h4>
				<p>1026<span>家</span> </p>
			</div>
			<div>
				<h4>完全自理</h4>
				<p>3002<span>家</span> </p>
			</div>
			<div>
				<h4>孤儿</h4>
				<p>223<span>人</span> </p>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		
	}
</script>

<style scoped lang="scss" type="text/scss">
	.city-index-r-1 {
		>div {
			float: left;
			width: 40%;
			height: 86px;
			text-align: center;
			margin-top: 20px;
			margin-bottom: 20px;
			position: relative;
			
			&:nth-child(2) {
				border: 1px solid #143761;
				border-top: none;
				border-bottom: none;
				width: 29.5%;
			}
			
			&:nth-child(3) {
				width: 29.5%;
			}
			
			&:nth-child(1) > p {
				font-size: 48px;
				line-height: 38px;
			}
			
			> h3 {
				font-size: 20px;
				margin: 0;
				color: #E9F4FF;
				font-weight: normal;
				padding-left: 15px;
				text-align: left;
			}
			> p {
				color: #3FECFF;
				text-align: left;
				padding-left: 15px;
				width: 100%;
				margin: 0;
				position: absolute;
				bottom: 0px;
				line-height: 1em;
				>span:nth-child(1) {
					font-size: 28px;
				}
				>span:nth-child(2) {
					font-size: 20px;
					color: #FBCC13;
				}
			}
		}
	}
	.city-index-r-2,.city-index-r-3 {
		> h2 {
			margin: 3px 3px 10px 3px;
			font-size: 16px;
			font-weight: 400;
			text-align: center;
			border-radius:10px;
			height: 38px;
			line-height: 38px;
		}
		>div {
			float: left;
			width: 20%;
			
			>h4 {
				margin: 0;
				font-size:14px;
				font-weight:400;
				color: #E9F4FF;
				margin-top: 8px;
			}
			>p {
				margin: 0;
				font-size:19px;
				font-weight:500;
				margin-top: 5px;
				margin-bottom: 15px;
				>span {
					font-size: 14px;
				}
			}
		}
	}
	
	.city-index-r-2 {
		> h2 {
			background:rgba(230,188,25,0.1);
			box-shadow:0px 0px 2px 3px rgba(230,188,25,0.26);
		}
		>div {
			p {
				color: #E6BC19;
			}
		}
	}
	.city-index-r-3 {
		> h2 {
			background:rgba(22,188,144,0.1);
			box-shadow:0px 0px 2px 3px rgba(13,175,144,0.26);
		}
		>div {
			p {
				color: #96E131;
			}
		}
	}
</style>
